<template>
  <div>
    <el-form :inline="true" style="margin-top: 20px">
      <el-form-item label-width="100px" label="会员id">
        <el-input
          v-model="memberId"
          placeholder="请输入要查询的会员id" size="small"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="inquery" size="small"><i class="el-icon-search"></i>查询</el-button>
        <el-button type="info" @click="show" size="small"><i class="el-icon-refresh"></i>重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="filterTable"
      :data="orderData"
      :span-method="objectSpanMethod"
    >
      <el-table-column label="订单信息">
        <el-table-column
          label="订单号"
          prop="orderId"
          :show-overflow-tooltip="true"
          width="100px"
        >
        </el-table-column>
        <el-table-column label="订单商品" :show-overflow-tooltip="true" width="200px">
          <template slot-scope="scope">
            <div style="display: flex">
              <img :src="scope.row.mainImage" width="60px" height="60px" />
              <div style="margin-left: 10px">
                <div>{{ scope.row.productName }}</div>
                <div>
                  <span style="margin-right: 30px"
                    >x {{ scope.row.productCnt }}</span
                  ><span>￥{{ scope.row.productPrice }}</span>
                </div>
              </div>
            </div>

            <!-- <button @click="updateSpecifications(scope.row)">改规格</button> -->
          </template>
        </el-table-column>
        <el-table-column
          label="订单状态"
          prop="orderStatus.name"
          width="160px"
          column-key="orderStatus.name"
          :filters="[
            { text: '未支付', value: '未支付' },
            { text: '已支付', value: '已支付' },
            { text: '已取消', value: '已取消' },
            { text: '已发货', value: '已发货' },
            { text: '已收货', value: '已收货' },
            { text: '退货', value: '退货' },
          ]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span style="margin-right: 20px">{{
              scope.row.orderStatus.name
            }}</span>
            <el-button
              @click="updateStatus(scope.row)"
              :disabled="scope.row.orderStatus.code == 1 ? false : true"
              >发货</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="订单金额"
          prop="orderMoney"
          column-key="orderMoney"
          sortable
          width="110px"
        >
          <template slot-scope="scope">
            <p>￥{{ scope.row.orderMoney }}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createDate"
          column-key="createDate"
          sortable
          width="110px"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="会员id"
        prop="memberId"
        :show-overflow-tooltip="true"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        label="收件人信息"
        width="120px"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <p>{{ scope.row.shippingUser }}</p>
          <p>{{ scope.row.receiverMobile }}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="收件地址"
        prop="address"
        width="150px"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <p>
            {{ scope.row.receiverProvince }}{{ scope.row.receiverCity
            }}{{ scope.row.receiverDistrict }}{{ scope.row.receiverZip }}
          </p>
          <!-- <el-button @click="updateAddress(scope.row)">修改</el-button> -->
        </template>
      </el-table-column>
      <el-table-column label="支付信息" width="100px">
        <template slot-scope="scope">
          <p>{{ scope.row.paymentMethod.name }}</p>
          <p>{{ scope.row.payTime }}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="物流信息"
        width="150px"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div
            v-if="scope.row.shippingSn !== null && scope.row.shippingSn !== ''"
          >
            <p>物流公司：{{ scope.row.shippingCompName }}</p>
            <p>快递单号：{{ scope.row.shippingSn }}</p>
          </div>

          <el-button v-else @click="updateShipping(scope.row)"
            >录入物流信息</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="仓库号" prop="wid" width="70px">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="keyword.currentPage"
      :page-size="keyword.pageSize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      :visible="orderShipVisible"
      :title="title"
      :before-close="handleClose"
      width="300px"
    >
      <el-form :model="orderForm" ref="orderForm" label-width="100px">
        <el-form-item
          label="物流公司"
          prop="shippingCompName"
          :rules="[
            { required: true, message: '物流公司不能为空', trigger: 'blur' },
          ]"
        >
          <!-- <el-input v-model="orderForm.shippingCompName"> </el-input> -->
          <el-select v-model="orderForm.shippingCompName" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="快递单号"
          prop="shippingSn"
          :rules="[
            { required: true, message: '快递单号不能为空', trigger: 'blur' },
          ]"
        >
          <el-input v-model="orderForm.shippingSn"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit('orderForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderList, updateOrder } from "@/api/order.js";
export default {
  data() {
    return {
      memberId: "",
      keyword: {
        currentPage: 1,
        pageSize: 10,
      },
      total: 0,
      orderShipVisible: false,
      orderForm: { shippingSn: "", shippingCompName: "" },
      orderStatus: 0,
      orderData: [],
      isAddress: true,
      title: "填写物流信息",
      spanArray: [],
      head: "https://zpl-1303223223.cos.ap-beijing.myqcloud.com",
      options: [{
          value: '顺丰快递',
          label: '顺丰快递'
        }, {
          value: '中通快递',
          label: '中通快递'
        }, {
          value: '申通快递',
          label: '申通快递'
        }, {
          value: '圆通快递',
          label: '圆通快递'
        }, {
          value: '韵达快递',
          label: '韵达快递'
        }],
    };
  },
  mounted() {
    this.show();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    filterHandler(value, row) {
      return row.orderStatus.name === value;
    },
    handleClose() {
      this.orderShipVisible = false;
      this.orderForm = {};
    },
    show() {
      this.keyword.memberId='';
      getOrderList(this.keyword).then((res) => {
        console.log(res);
        if (res.data.code === "0000") {
          this.orderData = res.data.data.records;
          for (let i = 0; i < this.orderData.length; i++) {
            this.orderData[i].mainImage =
              this.head + this.orderData[i].mainImage;
          }
          this.total = res.data.data.total;
          this.getSpanArr(this.orderData);
          
        }
      });
    },
    updateStatus(row) {
      if (confirm("是否确认发货")) {
        row.paymentMethod = row.paymentMethod.code;
        row.orderStatus = 3;
        row.id = row.orderId;
        row.deleteStatus = row.deleteStatus.code;
        updateOrder(row).then((res) => {
          console.log(res);
          if (res.data.code === "0000") {
            this.$message.success("成功发货");
            // row.orderStatus =  {code:3,name:'已发货'};
          } else {
            row.orderStatus = 1;
            this.$message.error("发货失败");
            // row.orderStatus =  {code:1,name:'待发货'};
          }
          this.show()
        });
      }
    },
    updateShipping(row) {
      this.orderShipVisible = true;
      this.orderForm = row;
    },
    submit(orderForm) {
      this.$refs[orderForm].validate((valid) => {
        if (valid) {
          this.orderForm.id = this.orderForm.orderId;
          this.orderForm.paymentMethod = this.orderForm.paymentMethod.code;
          this.orderForm.orderStatus =  this.orderForm.orderStatus.code;
          this.orderForm.deleteStatus = this.orderForm.deleteStatus.code;
          updateOrder(this.orderForm).then((res) => {
            if (res.data.code === "0000") {
              this.$message.success("填写成功");
            //    this.orderForm.orderStatus =  {code:3,name:'已发货'}
              this.show()
              this.handleClose();
            } else {
              this.$message.error("填写失败，请检查网络，重新填写");
            }
          });
        }
      });
    },
    getSpanArr(data) {
        this.spanArray=[];
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArray.push(1);
          this.pos = 0;
        } else {
          if (data[i].orderId === data[i - 1].orderId) {
            this.spanArray[this.pos] += 1;
            this.spanArray.push(0);
            this.total--;
          } else {
            this.spanArray.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4 ||
        columnIndex === 5 ||
        columnIndex === 6 ||
        columnIndex === 7 ||
        columnIndex === 8 ||
        columnIndex === 9 ||
        columnIndex === 10
      ) {
        const _row = this.spanArray[rowIndex];
        const _col = _row > 0 ? 1 : 0;

        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    inquery() {
      if (this.memberId !== "") {
        this.keyword.memberId = this.memberId;
        getOrderList(this.keyword).then((res) => {
          console.log(res);
          if (res.data.code === "0000") {
            this.orderData = res.data.data.records;
            for (let i = 0; i < this.orderData.length; i++) {
              this.orderData[i].mainImage =
                this.head + this.orderData[i].mainImage;
            }
            this.total = res.data.data.total;
            this.getSpanArr(this.orderData);
            this.memberId = "";
          }
        });
      }
    },
  },
};
</script>

<style>
</style>